<!--
 * @Author: your name
 * @Date: 2020-05-25 05:35:19
 * @LastEditTime: 2020-05-25 06:06:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bootstrap-practice\04导航\03.导航栏.html
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href='https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
    <div class="navbar navbar-default">
        <!-- 放置logo -->
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">看见台词</a>
            </div>
            <ul class="nav navbar-nav">
                <!-- 必须要有a标签才能显示出效果 -->
                <li><a href="#">首页</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
            <form action="" class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control">
                </div>
                <button type="submit" class="btn btn-default">提交</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="">登录</a></li>
                <li><a href="">注册</a></li>
            </ul>
        </div>
    </div>
    <div class="container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate suscipit quaerat veniam consectetur qui cumque rem quis culpa laborum voluptas, modi corporis, nemo tempora fuga? Quod architecto ducimus iste dolores!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate suscipit quaerat veniam consectetur qui cumque rem quis culpa laborum voluptas, modi corporis, nemo tempora fuga? Quod architecto ducimus iste dolores!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate suscipit quaerat veniam consectetur qui cumque rem quis culpa laborum voluptas, modi corporis, nemo tempora fuga? Quod architecto ducimus iste dolores!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate suscipit quaerat veniam consectetur qui cumque rem quis culpa laborum voluptas, modi corporis, nemo tempora fuga? Quod architecto ducimus iste dolores!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate suscipit quaerat veniam consectetur qui cumque rem quis culpa laborum voluptas, modi corporis, nemo tempora fuga? Quod architecto ducimus iste dolores!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate suscipit quaerat veniam consectetur qui cumque rem quis culpa laborum voluptas, modi corporis, nemo tempora fuga? Quod architecto ducimus iste dolores!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate suscipit quaerat veniam consectetur qui cumque rem quis culpa laborum voluptas, modi corporis, nemo tempora fuga? Quod architecto ducimus iste dolores!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate suscipit quaerat veniam consectetur qui cumque rem quis culpa laborum voluptas, modi corporis, nemo tempora fuga? Quod architecto ducimus iste dolores!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate suscipit quaerat veniam consectetur qui cumque rem quis culpa laborum voluptas, modi corporis, nemo tempora fuga? Quod architecto ducimus iste dolores!
        
    </div>
</body>
</html>